<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  *{
    padding: 0; margin: 0;
  }
  .line-container{
    width: 100%;
    height: 250px;
    margin-top: 100px;
    position: relative;
  }
  .line-container .line{
    height: 10px;
    width: 100%;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    /* background: #ccc; */
    opacity: 1;
  }
  .line-container .mt10{
    /* margin-top: 10px; */
  }
  .line-container .mt40{
    margin-top: 40px;
  }
  .note{
    width: 8px;
    height: 8px;
    box-sizing: border-box;
    border: 1px solid #000;
    border-radius: 50%;
    position: absolute;
  }
  /* .do{
    transform: translateY(0);
  }
  .re{
    transform: translateY(-10px);
  }
  .mi{
    transform: translateY(-20px);
  }
  .fa{
    transform: translateY(-30px);
  } */
  .height{
    position: absolute;
    top: 60px;
  }
  .low{
    position: absolute;
    top: 80px;
  }
  /* 
    高音区
    音节
  */
</style>
<body>
  <div class="line-container">
    <div class="line"></div>
    <div class="line mt10"></div>
    <div class="line mt10"></div>
    <div class="line mt10"></div>
    <div class="line mt10"></div>

    <div class="line mt40"></div>
    <div class="line mt10"></div>
    <div class="line mt10"></div>
    <div class="line mt10"></div>
    <div class="line mt10"></div>
    <!-- 内容 -->
    <section id="note-container">
    </section>
    <section id="answer" style="font-size: 16px; height: 24px;" ></section>
    <hr>

    <section id="answer-option" >
      <button>do</button>
      <button>re</button>
      <button>mi</button>
      <button>fa</button>
      <button>sol</button>
      <button>la</button>
      <button>xi</button>
    </section>
    <button id="answer-check">验证</button>
  
  </div>
  <button id="render" >render</button>
  <input type="number" id="length" value="1" />
  <script>
    const answerOption = document.querySelectorAll('#answer-option button');
    const answerCheck = document.querySelector('#answer-check');
    const answer = document.querySelector('#answer');
    let str = ''
    let currStr = ''
    answerCheck.addEventListener('click', function(e) {
      console.log('xxx')
      if (str === currStr) {
        console.log('正确')
        render();
      } else {
        console.log('错误')
      }
      str = ''
      answer.innerHTML = str;
    })
    for (const btn of answerOption) {
      btn.addEventListener('click', function(e) {
        // console.log(this.innerHTML);
        str += `${this.innerHTML}.`;
        answer.innerHTML = str;
      })
    }
    let d = [
      {value: 'do', id: '1', className: 'note do height', y: '0px', x: '0px'},
      {value: 're', id: '2', className: 'note re height', y: '-10px', x: '10px'},
      {value: 'mi', id: '3', className: 'note mi height', y: '-15px', x: '20px'},
      {value: 'fa', id: '4', className: 'note fa height', y: '-20px', x: '30px'},
      {value: 'sol', id: '5', className: 'note sol height', y: '-25px', x: '40px'},
      {value: 'la', id: '6', className: 'note la height', y: '-30px', x: '50px'},
      {value: 'xi', id: '7', className: 'note xi height', y: '-35px', x: '60px'},

      {value: 'do', id: '1', className: 'note do low', y: '0px', x: '0px'},
      {value: 're', id: '2', className: 'note re low', y: '10px', x: '10px'},
      {value: 'mi', id: '3', className: 'note mi low', y: '15px', x: '20px'},
      {value: 'fa', id: '4', className: 'note fa low', y: '20px', x: '30px'},
      {value: 'sol', id: '5', className: 'note sol low', y: '25px', x: '40px'},
      {value: 'la', id: '6', className: 'note la low', y: '30px', x: '50px'},
      {value: 'xi', id: '7', className: 'note xi low', y: '35px', x: '60px'},
    ]

    const getNote = (arr) => {
      let index = parseInt(Math.random() * (d.length - 1))
      if (arr.includes(d[index])) {
        return getNote(arr);
      }
      return d[index];
    }

    const render = () => {
      const lengthInput = document.querySelector('#length')
      const NoteContainer = document.querySelector('#note-container')
      currStr = ''
      answer.innerHTML = '';
      let strHTML = ``
      let arr = []
      let l = parseInt(lengthInput.value) || 10
      
      for (let i = 0; i < l; i++) {
        arr.push(getNote(arr));
      }
      for (const item of arr) {
        currStr += item.value + '.';
        strHTML += `<div class="${item.className}" style="transform: translateY(${item.y}); left: ${item.x};"></div>`
      }
      console.log(currStr)
      NoteContainer.innerHTML = strHTML;
    }
    render();

    const renderBtn = document.querySelector('#render');
    renderBtn.onclick = render;
    
  </script>
</body>
</html>